
<template>
  <el-dialog :title="dialogData.title"
             :visible.sync="dialogData.show"
             center
             @close="$emit('closedialog')">
    <el-form :model="formdata"
             label-position="right"
             ref="ruleForm"
             :rules="rules"
             label-width="120px">
      <el-form-item label="推送方式："
                    prop="type">
        <el-radio-group v-model="formdata.type">
          <el-radio :label="2">群发</el-radio>
          <el-radio :label="1">个发</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接收端："
                    prop="targetClient">
        <el-radio-group v-model="formdata.targetClient">
          <el-radio :label="'doctor'">医生端</el-radio>
          <el-radio :label="'user'">用户端</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接收用户："
                    v-if="formdata.type == 1">
        <el-input v-model="formdata.receiveRyId"
                  autocomplete="off"
                  style="width:70%"></el-input>
      </el-form-item>
      <el-form-item label="消息标题："
                    prop="title">
        <el-input v-model="formdata.title"
                  autocomplete="off"
                  style="width:70%"></el-input>
      </el-form-item>
      <el-form-item label="短信内容：">
        <el-select v-model="formdata.msgTemplate"
                   placeholder="请选择"
                   @change='seChange'
                   clearable>
          <el-option v-for="item in options"
                     :key="item.code"
                     :label="item.name"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接收短信电话："
                    v-if="formdata.msgTemplate != ''">
        <el-input v-model="formdata.receivePhone"
                  autocomplete="off"
                  style="width:70%"
                  placeholder="多个以逗号隔开"></el-input>
      </el-form-item>
      <el-form-item label="短信模板："
                    v-if="formdata.msgTemplate != ''">
        <!-- <div v-for="(it,index) in paramContent" :key="index" >
            <p style="width:100px;text-align:right">{{it.name+'：'}}</p>
            <el-input v-model="it.abc" style="width:200px;margin-left:10px"></el-input>
          </div> -->
        <div v-for="(key,iam,index) in list"
             :key="iam"
             style="display:flex;margin-bottom:10px">
          <p style="width:100px;text-align:right">{{paramContent[index].name+'：'}}</p>
          <el-input v-model="lp[index][iam]"
                    style="width:200px;margin-left:10px"></el-input>
        </div>

      </el-form-item>
      <el-form-item label="点击跳转方式：">
        <el-select v-model="formdata.actionType"
                   placeholder="请选择"
                   clearable>
          <el-option label="url链接"
                     :value="1"></el-option>
          <el-option label="产品ID"
                     :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="跳转URL："
                    v-if="formdata.actionType == 1">
        <el-input v-model="formdata.actionContent"
                  style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item label="消息内容："
                    prop="message">
        <el-input v-model="formdata.message"
                  type="textarea"
                  maxlength="200"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  show-word-limit
                  autocomplete="off"
                  style="width:70%"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="$emit('closedialog')">返 回</el-button>
      <el-button type="success"
                 style="background-color:#33c99e;color:#FFF"
                 v-if="dialogData.canup"
                 @click="addone">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['dialogData'],
    data () {
      return {
        options: [],
        paramContent: [],
        formdata: {
          type: '',
          num: 100,
          imageUrl: null,
          msgTemplate: ''
        },
        rules: {
          type: [
            { required: true, message: '请选择推送方式', trigger: 'change' }
          ],
          targetClient: [
            { required: true, message: '请选择接收端', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请输入消息标题', trigger: 'blur' }
          ],
          message: [
            { required: true, message: '请输入消息内容', trigger: 'blur' }
          ]
        },
        list: {},
        lp: []
      }
    },
    methods: {
      addone () {


        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.formdata.msgTemplate != '') {
              let arr = Object.assign(...this.lp)
              this.formdata.msgParam = JSON.stringify(arr)
            }

            this.post(this.api.cooperationHospital.sendMessage, this.formdata).then(res => {
              if (res.data.code === '200') {
                this.$message.success(res.data.message)
                this.$emit('closedialog')
              } else {
                this.$message.warning(res.data.message)
              }
            })
          } else {
            return false;
          }
        });

      },
      getSMSTemplateList () {
        this.post(this.api.cooperationHospital.getSMSTemplateList).then(res => {
          if (res.data.code === '200') {
            this.options = res.data.object
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      seChange (val) {
        this.paramContent = JSON.parse(this.options.filter(ele => ele.code == val)[0].paramContent)
        this.paramContent.forEach(ele => {
          let pl = {}
          this.list[ele['value']] = ''
          this.lp.push(pl)
        })
      }
    },
    mounted () {
      this.getSMSTemplateList()
      if (this.dialogData.info) {
        this.post(this.api.cooperationHospital.getMessageRecordDetail, { id: this.dialogData.info.id }).then(res => {
          this.formdata = res.data.object
          if (this.formdata.msgParam) {
            this.paramContent = JSON.parse(res.data.object.msgParam)
          }
        })

      }

    }
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
    text-align: center;
  }
  .avatar {
    width: 98px !important;
    height: 98px !important;
    display: block;
  }
</style>
